<template>
	<div>
		<div class="no-print" style="height: 42px;"></div>
		<div style="width: 100%;display: flex;">
			<div class="no-print" style="width: 30%;">.</div>
			<div class="width-100-percent print-content">
				<div class="flex-center" style="font-size: 16px;font-weight: 700;">
					<span>恒友-{{ `${ruleForm.scheduleGroupName}` }}产量统计({{ ruleForm.belongDate }} {{ ruleForm.scheduleShiftName }})</span>
				</div>
				<jk-table
					v-show="printType === '1'"
					ref="jkTable"
					:highlight-hover-row="false"
					:stripe="false"
					:span-method="mergeColMethod"
					border
					:header-cell-style="cellStyle"
					:cell-style="cellStyle"
					:row-style="cellStyle"
					:data="ruleForm.machineList"
				>
					<vxe-column title="机台" align="left" field="machineName" :width="60"></vxe-column>
					<vxe-column title="锭序" align="center" field="spinGroupIndex" :width="70"></vxe-column>
					<vxe-column title="锭组" align="center" field="startSpinNumber" :width="70">
						<template slot-scope="scope">
							<span>{{ `${scope.row.startSpinNumber}~${scope.row.endSpinNumber}` }}</span>
						</template>
					</vxe-column>
					<vxe-column title="品种" align="left" field="productModels" :width="180"></vxe-column>
					<vxe-column title="单价" align="right" field="price" :width="100"></vxe-column>
					<vxe-column title="人员" align="left" field="empName" :width="70"></vxe-column>
					<vxe-column title="实做产量" align="right" field="machineOutputKg" :width="70"></vxe-column>
					<vxe-column title="人员锭组工资" align="right" field="singleSalary" :width="100"></vxe-column>
				</jk-table>

				<jk-table
					v-show="printType !== '1'"
					show-footer
					:header-cell-style="cellStyle"
					:footer-cell-class-name="footerCellClassName"
					:cell-style="cellStyle"
					:row-style="cellStyle"
					:footer-method="footerMethod"
					:stripe="false"
					border
					:data="ruleForm.empList"
					class="margin-bottom-10"
				>
					<vxe-column title="姓名" align="left" field="empName" :width="70" />
					<vxe-column title="产量(kg)" align="right" field="empTotalOutputKg" :width="80" />
					<vxe-column title="锭组明细" align="left" field="machineList" :width="406">
						<template slot-scope="scope">
							<div>{{ scope.row.machineList ? scope.row.machineList.map(x => `${x.machineCode}(${x.startSpinNumber}~${x.endSpinNumber})`).join(' , ') : '' }}</div>
						</template>
					</vxe-column>
					<vxe-column title="补贴" align="right" field="bdAllowance" :width="80"></vxe-column>
					<vxe-column title="工资合计" align="right" field="totalSalary" :width="80" />
				</jk-table>
				<div class="flex-start-center">
					<span style="white-space: nowrap;margin-right: 4px;">备注: </span>
					<span>{{ ruleForm.remark }}</span>
				</div>
			</div>
			<div class="no-print" style="width: 30%;margin-top: 22px;">
				<div style="display: flex;flex-direction: column;">
					<div>
						<el-button class="no-print" type="default" icon="el-icon-printer" size="small" style="margin-left: 4px;" @click="onPrintBtn"></el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import machineData from './components/machine-data';
    import mergeMixin from './merge-mixin';
    import XEUtils from 'xe-utils';
    import { spinReportLtGroupYieldGet } from '../../../api/production/ltDailyGroupYieldNew';
    export default {
        mixins: [mergeMixin],
        components: {
            machineData
        },
        data() {
            return {
                tablePrint: {
                    // 自定义打印的样式示例
                    style: `
                .vxe-table {
                  color: #000000; // 修改表格默认颜色
                  font-size: 12px; // 修改表格默认字体大小
                  font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; // 修改表格默认字体
                }
                .vxe-table,
                .vxe-table thead th,
                .vxe-table tbody td,
                .vxe-table tfoot td  {
                  border-color: red; // 修改表格边框颜色
                }
                .vxe-table thead th {
                  color: green; // 修改表头字体颜色
                  font-size: 14px; // 修改表头默认字体大小
                }
                .vxe-table tfoot td {
                  color: red; // 修改表尾字体颜色
                }
                `
                },
                printType: '1',
                tableData: [],
                dataId: null,
                ruleForm: {},
                csStr: '', // 拼接粗纱品种
                alStr: '' // 拼接粗纱以外的品种
            };
        },
        methods: {
            footerMethod({ columns, data }) {
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计:';
                        }
                        if (['totalSalary'].includes(column.property)) {
                            if (column.property === 'totalSalary') {
                                return XEUtils.sum(data, column.property);
                            }
                            return XEUtils.sum(data, column.property);
                        }
                        return null;
                    })
                ];
            },
            footerCellClassName() {
                return 'emp-table-footer-style';
            },
            cellStyle() {
                return {
                    border: 'solid 1px black'
                };
            },
            rowStyle() {
                return {
                    border: 'solid 1px black'
                };
            },
            onDeleteMachineBtn(index) {
                this.tableData.splice(index, 1);
            },
            onPrintBtn() {
                window.print();
            },
            // 详情
            getDetailRequest() {
                return spinReportLtGroupYieldGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        const resData = JSON.parse(JSON.stringify(res.data.res));
                        this.ruleForm = resData;
                    }
                });
            },
            async getDependentData() {
                this.dataId = this.$route.query.id;
                if (this.dataId) await this.getDetailRequest();
            }
        },
        mounted() {
            this.printType = this.$route.query.printType;
            this.getDependentData();
        }
    };
</script>
<style>
.emp-table-footer-style {
    /*border-width: 4px;*/
    border: solid 1px black;
    border-top: solid 2px black;
}
</style>
<style scoped lang="scss">

.print-content {
    ::v-deep .vxe-table--render-default {
        position: relative;
        border: solid 2px black!important;
        font-size: 12px;
        color: #606266;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        direction: ltr;
    }
}
.table {
    width: 100%;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    box-sizing: border-box;
    font-weight: 500;
    tr {
        //height: 139px;
        border: solid 2px #17233d;
    }
    td {
        min-width: 100px;
        box-sizing: border-box;
        padding: 10px;
        border: solid 2px #17233d;
        text-align: center;
    }
    .form-title {
        font-weight: 500;
        font-size: 36px;
    }
    .label-name {
        font-weight: 500;
        font-size: 28px;
    }
}
@media print {
    .no-print{
        display: none;
    }
}
</style>
